<template>
  <div ref="map"
       class="small-map">
    <!-- 地图上方的标题dom -->
    <div class="label-map"
         @mousedown="move">
      <div class="date">
        <div v-if="pointData.loading"
             class="loading"><i class="el-icon-loading"></i></div>
        <div class="time">
          <i class="icon-position el-icon-time"></i>
          <span>{{ pointData.time ? pointData.time.split('.')[0] : pointData.time }}</span>
        </div>
        <div class="temperature">
          <img :src="temperatureIcon"
               style="width:14px;height:18px;margin-right:5px" />
          {{ pointData.temperatureData }} ℃
        </div>
        <div class="humidity">
          <img :src="humidityIcon"
               style="width:14px;height:18px;margin-right:5px" />
          {{ pointData.humidityData }} %RH
        </div>
        <div class="close-icon"><i class="el-icon-circle-close"
             @click="closeMap"></i></div>
      </div>
      <div class="address">
        <i class="icon-position icondingwei iconfont"></i>
        <span>地址：{{ pointData.address }}</span>
      </div>
    </div>
    <!-- 地图的承载容器 -->
    <div id="smallMap"></div>
  </div>
</template>

<script>
import { SmallMapInit } from "@/libs/util.js";
export default {
  name: "SmallMap",
  props: {
    pointData: {
      type: Object,
      default () {
        return {}
      }
    },
    temperatureIcon: {
      type: String,
      default: () => ""
    },
    humidityIcon: {
      type: String,
      default: () => ""
    }
  },
  data () {
    return {
      smallMap: '',
      // marker自定义图标
      markerIcon: require('@/static/images/showAddress.png')
    }
  },
  watch: {
    // 监听父组件传递过来的数据变化(在用户点击图表上的点变更时)
    pointData (data) {
      if (data.loading) return
      const smallMap = this.smallMap
      // 清除地图上所有的marker点
      smallMap.clearOverlays()
      const points = new BMap.Point(data?.point?.lng, data?.point?.lat)
      // 设置地图的中心点和缩放比例
      smallMap.centerAndZoom(points, 12)
      const myIcon = new BMap.Icon(this.markerIcon, new BMap.Size(24, 35))
      // 设定marker点
      const marker = new BMap.Marker(points, {
        icon: myIcon
      })
      // 如果坐标点成功转换成地址信息之后
      const address = data.address
      /**
       * 判断当前地址文本是否大于15个字符
       * 如果大于15个字符，宽度则固定为200px，超出则自动换行
       * 如果小于15个字符，则宽度跟随字符数自适应
       * 不管label的宽度为多宽，都将自动居中于marker图标
       */
      const bigSize = address?.length > 15
      const textAlignValue = bigSize ? 'left' : 'center'
      const widthValue = bigSize ? '200px' : address?.length * 15 + 'px'
      const offsetX = bigSize ? -100 + 12 : (-address?.length * 7.5) + 12
      const labelHtml = `<div style='width:${widthValue};white-space:normal;text-align:${textAlignValue}'>${address}</div>`
      if (address) {
        const label = new BMap.Label(labelHtml, {
          offset: new BMap.Size(offsetX, 38)
        })
        label.setStyle({
          border: "0",
          padding: "10px",
          boxShadow: "0px 0px 2px 2px rgba(0, 0, 0, 0.1)"
        })
        // 加载携带地址信息的label
        marker.setLabel(label)
      }
      smallMap.addOverlay(marker)
    }
  },
  mounted () {
    SmallMapInit().then((BMap) => {
      this.smallMap = new BMap.Map("smallMap")
      this._initMap(this.pointData)
    })
  },
  methods: {
    // 用户拖拽事件
    move (e) {
      const odiv = this.$refs.map
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft
      const disY = e.clientY - odiv.offsetTop
      document.onmousemove = e => {
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const left = e.clientX - disX
        const top = e.clientY - disY

        // 绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        // 移动当前元素
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    // 关闭地图组件事件
    closeMap () {
      this.$emit('closeMap')
    },
    // 初始化地图组件
    _initMap (point = { lng: 116.404, lat: 39.915 }) {
      const points = new BMap.Point(point.lng, point.lat)
      const smallMap = this.smallMap
      smallMap.centerAndZoom(points, 12)
      smallMap.enableScrollWheelZoom(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.small-map {
  width: 28%;
  min-width: 460px;
  height: 50%;
  min-height: 400px;
  position: fixed;
  right: 0;
  bottom: 0;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
  #smallMap {
    width: 100%;
    height: 100%;
  }
  .label-map {
    font-size: 14px;
    position: absolute;
    width: 100%;
    height: 60px;
    background-color: var(--prev-bg-white);
    z-index: 1000;
    padding: 10px 10px 5px;
    box-sizing: border-box;
    .iconfont {
      margin-right: 5px;
      font-size: 14px !important;
    }
    .address {
      height: 25px;
      line-height: 25px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .date {
      height: 25px;
      width: 100%;
      display: flex;
      .time {
        flex: 0 0 220px;
        display: flex;
        align-items: center;
        i {
          margin-right: 5px;
          font-weight: 700;
        }
      }
      .loading {
        flex: 0 0 40px;
        text-align: center;
      }
      .temperature {
        flex: 1;
        display: flex;
        align-items: center;
      }
      .humidity {
        flex: 1;
        display: flex;
        align-items: center;
      }
      .close-icon {
        flex: 0 0 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #666;
        font-size: 18px;
        i {
          cursor: pointer;
          &:hover {
            color: var(--prev-color-text-primary);
          }
        }
      }
    }
  }
}
</style>
